<template>
  <div class="product-list-item">
    <img class="purchase-img" :src="purchaseImg">
    <img class="product-img" :src="productImg">
    <div class="product-description-container">
      <h4 class="title">迷你Minnie迷你加大飞碟说迷你Minnie迷你加大飞碟说</h4>
      <div class="frbc money">
        <span class="RMB-sign">￥</span>
        <span class="sale-price">438.00</span>
        <span class="market-price">￥938.00</span>
      </div>
      <div class="sale-buy frsbe">
        <span class="sale-count">销量：9010</span>
        <router-link class="buy" to="">立即抢购</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      productImg: require('@/common/image/home-single-product.png'),
      purchaseImg: require('@/common/image/qianggou.png')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
.product-list-item
  position relative
  width 3.44rem
  background-color $cff
.purchase-img
  position absolute
  top 0
  left 0
  height .72rem
  width .72rem
.product-img
  height 3.44rem
  width 3.44rem
  border-top-right-radius .08rem
  border-top-left-radius .08rem
.title
  line-height .32rem
  font-size .28rem
  text-align justify
  color $c33
.money
  margin-top .30rem
.RMB-sign
  font-size .24rem
  color $coupon-color
.sale-price
  margin-left .10rem
  font-size .38rem
  color $coupon-color
.market-price
  margin-left .10rem
  font-size .24rem
  text-decoration line-through
  color $c99
.product-description-container
  padding .20rem
.sale-buy
  margin-top .30rem
  height .48rem
.sale-count
  font-size .22rem
  color $c99
.buy
  width 1.46rem
  line-height .48rem
  height .48rem
  font-size .28rem
  text-align center
  border-radius .30rem
  color $cff
  background-color $coupon-color
</style>
